<template>
  <div class="left-container">
    <h2>Left</h2>
    <p>{{ age }}</p>
    <art-list ref="artlistRef"></art-list>
  </div>
</template>

<script>
import ArtList from "@/components/ArtList.vue";
export default {
  components: {
    ArtList,
  },
  data() {
    return {
      age: 21,
    };
  },
  // 第1个生命周期钩子函数 beforeCreate
  beforeCreate() {
    console.log("beforeCreate", this.age);
  },
  // 第2个生命周期钩子函数 created
  created() {
    console.log("created", this.age);
  },
  // 第3个生命周期钩子函数 beforeMount
  beforeMount() {
    console.log("beforeMount", document.querySelector("h2"));
  },
  // 第4个生命周期钩子函数，mounted
  mounted() {
    console.log("mounted", document.querySelector("h2"));
  },
  // 第5个生命周期钩子函数，beforeUpdate
  beforeUpdate() {
    console.log("beforeUpdate", this.age, this.$refs.p.innerHTML); // 21  20
  },
  // 第6个生命周期钩子函数，updated
  updated() {
    console.log("updated", this.age, this.$refs.p.innerHTML);
  },
  // 第7个生命周期钩子函数，beforeDestroy
  beforeDestroy() {
    console.log("beforeDestroy", this.$refs.p);
  },
  // 第8个生命周期钩子函数，desdroyed
  destroyed() {
    console.log("destroyed", this.$refs.p);
  },
  // 错误捕获钩子函数
  errorCaptured(err, vm, info) {
    console.log(err.message); // 拿到 错误描述信息
    console.log(vm); // 报错的那个组件的实例对象
    console.log(info); // 也是错误信息
    return false; // 阻止错误继续传播
  },
};
</script>

<style  scoped>
.left-container {
  background-color: cadetblue;
}
</style>
